<template>
  <view class="column callBack">
    <view class="column service" style="background: linear-gradient(180deg, #CAE5FF 0%, #FFFFFF 100%);">
      <image :src="shoutIcons" mode="" class=""></image>
      <view style="color:#1B91FF">呼叫安蓝服务</view>
      <image :src="shoutBlue" mode=""></image>
    </view>
    <view class="messages">
      <view class="" v-if="notes">
        <view class="space-between line">
          <view>姓名</view>
          <view>{{userInfo.nickname}}</view>
        </view>
        <view class="space-between line">
          <view>手机号</view>
          <view>{{ userInfo.mobile }}</view>
        </view>
        <view class="space-between line">
          <view>服务内容</view>
          <view>加注车用尿素</view>
        </view>
        <view class="space-between line">
          <view>预约时间</view><input class="uni-input" placeholder="点击输入预约时间" v-model="data" />
        </view>
        <view class="space-between line">
          <view>预约地点</view><input class="uni-input" placeholder="点击输入预约地点" v-model="locat" />
        </view>
        <view class="space-between line" style="align-items: flex-start;border-bottom: 0px;">
          <view>备注</view><textarea class="textarea" v-model="value" placeholder="请简单描述..."
            :auto-height='true'></textarea>
        </view>
      </view>
      <view class="center" v-else>
        <text style="color:#1B91FF">备注</text>
        <uni-icons type="bottom" size="22" color="#666" @click="()=>notes=true"></uni-icons>
      </view>
      <view class="call" style="background: linear-gradient(69deg, #41A3FF 0%, #1B91FF 100%);" @click="submit()">立即呼叫
      </view>
    </view>
  </view>
  <view style="width:100%;text-align: center;margin-top:10rpx">
    <uni-icons type="close" size="40" color="#fff" @click="close()"></uni-icons>
  </view>
</template>

<script setup lang="ts">
  import { showLoading, errorToast } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import { onShow } from '@dcloudio/uni-app';
  import { shoutBlue, shoutIcons } from '@/utils/Static';
  import { getDriverID } from '@/stores/driverID';
  import { useUserStore } from '@/stores/user';
  import { ref } from 'vue';
  const driver_id = getDriverID();
  const userInfo = useUserStore();
  const notes = ref(false)
  const value = ref('');
  const data = ref('')
  const locat = ref('')
  const emit = defineEmits(['close', 'success']);
  onShow(() => {
    if (!userInfo.avatar) {
      userInfo.getUserInfo();
    }
  });
  function submit() {
    if(!userInfo.mobile){
      return
    }
    showLoading('正在加载');
    const payload = {
      driver_id,
      mobile: userInfo.mobile,
      driver_name: userInfo.nickname,
      cate: '加注车用尿素',
      subtime: data.value,
      address: locat.value,
      des: value.value,
    };
    toPublish('driver/addCall', payload, (obj : any) => {
      uni.hideLoading();
      const { code, msg } = obj;
      emit('close')
      if (code === 1) {
        emit('success')
      } else {
        errorToast(msg)
      }
    });
  }
  function close() {
    emit('close')
  }
</script>

<style scoped lang="less">
  @import url('../callBack/less/callBack.less');
</style>
<style>
  .space-between>>>.textarea {
    width: 70%;
    text-align: right;
  }
</style>